<script>
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { passwordEdit } from "@/http/api";
import { routes } from "@/router/index.js";
import CoolDialog from "@/components/CoolDialog.vue";
import PasswordForm from "@/components/PasswordForm.vue";
import { useUserStore } from "@/store/user";
export default {
  components: {
    CoolDialog,
    PasswordForm,
  },
  name: "",
  data() {
    return {
      navArr: [],
      openHeight: 0,
      passwordFormData: {
        old_password: "",
        new_password: "",
        confirm_password: "",
      },
      editPassword: false,
      outMask: false,
      formValid: false,
      showUserMenu: false,
    };
  },
  props: {},
  setup() {},
  computed: {
    userStore() {
      return useUserStore();
    },
  },
  methods: {
    setdef() {
      // 设置默认全部项active为false
      for (let item of this.navArr) {
        item.active = false;
        if (item.children) {
          for (let key of item.children) {
            key.active = false;
          }
        }
      }
      this.setCheckLeft();
    },
    setCheckLeft() {
      let url = this.$route.path;
      for (let item of this.navArr) {
        for (let key of item.children) {
          if (url == key.path) {
            item.active = true;
            key.active = true;
            this.openHeight = (item.children.length + 1) * 50 + "px";
            break;
          }
        }
      }
    },
    navFn(item) {
      if (item.active) {
        item.active = false;
      } else {
        for (let key of this.navArr) {
          if (item.name === key.name) {
            key.active = true;
            this.openHeight = (item.children.length + 1) * 50 + "px";
          } else {
            key.active = false;
          }
        }
      }
    },
    listFn(item) {
      this.$router.push({ path: item.path });
    },
    async dropFn(id) {
      // 关闭下拉菜单
      this.showUserMenu = false;

      if (id === 2) {
        // 重置表单数据
        this.passwordFormData = {
          old_password: "",
          new_password: "",
          confirm_password: "",
        };
        this.editPassword = true;
      } else if (id === 3) {
        this.outMask = true;
      }
    },
    toggleUserMenu() {
      this.showUserMenu = !this.showUserMenu;
    },
    // 点击菜单外部关闭菜单
    handleClickOutside(e) {
      const userInfo = document.querySelector(".userInfo");
      if (userInfo && !userInfo.contains(e.target)) {
        this.showUserMenu = false;
      }
    },
    handlePasswordValidate(isValid) {
      this.formValid = isValid;
    },
    async sureEditFn() {
      // 获取表单组件的验证结果
      const passwordFormRef = this.$refs.passwordForm;
      if (!passwordFormRef.validate()) {
        return;
      }

      const queryData = {
        old_password: this.passwordFormData.old_password,
        new_password: this.passwordFormData.new_password,
      };

      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      try {
        const res = await passwordEdit(queryData);
        setTimeout(() => {
          loading.close();
        }, 100);
        if (res) {
          ElMessage({
            type: "success",
            message: "修改成功，即将退出重新登录",
          });
          this.editPassword = false;
          setTimeout(() => {
            this.$router.push({ path: "/login" });
          }, 1000);
        }
      } catch (error) {
        loading.close();
      }
    },
    outFn() {
      ElMessage({
        type: "success",
        message: "退出成功",
      });
      localStorage.removeItem("token");
      setTimeout(() => {
        this.$router.push({ path: "/login" });
      }, 1500);
    },
    setSecondCateFn() {
      let tagArr = JSON.parse(JSON.stringify(routes));
      // 过滤隐藏hidden页
      tagArr.forEach((item) => {
        if (item.children) {
          item.children = item.children.filter((childItem) => {
            return !childItem.isHidden;
          });
        }
      });
      //开启权限菜单配置
      // let secondFilterTag = this.userStore.perms;
      // secondFilterTag = secondFilterTag.map((permsItem) => {
      //   let str = permsItem.split(":")[0] + ":" + permsItem.split(":")[1];
      //   return str;
      // }); //二级权限
      // tagArr = tagArr.map((item) => {
      //   item.children = item.children.filter((secondItem) => {
      //     return secondFilterTag.includes(secondItem.name);
      //   });
      //   return item;
      // });
      // // 过滤空children
      // tagArr = tagArr.filter((item) => {
      //   return item.children.length;
      // });
      this.navArr = tagArr;
    },
  },
  mounted() {
    // 添加全局点击事件来关闭下拉菜单
    document.addEventListener("click", this.handleClickOutside);
  },
  unmounted() {
    // 移除全局点击事件
    document.removeEventListener("click", this.handleClickOutside);
  },
  async created() {
    this.setSecondCateFn();
    this.setdef();
  },
};
</script>
<template>
  <div class="container">
    <div class="leftNav">
      <div class="brand-area">
        <div class="brand-logo">
          <img src="/img/logo.png" />
        </div>
        <div class="brand-name">AI模版系统</div>
      </div>
      <div class="navCont">
        <div class="parentList">
          <div
            :class="[
              'navItem',
              item.active && item.children ? 'navItemActive' : '',
              item.active ? 'item-active' : '',
            ]"
            :key="index"
            v-for="(item, index) in navArr"
          >
            <div
              :class="[
                'navTop',
                item.active && !item.children ? 'navActive' : '',
              ]"
              @click="navFn(item)"
            >
              <div class="navItemVal">
                <span :class="['nav-icon', 'iconfont', item.meta.icon]"></span>
                {{ item.meta.title }}
              </div>
              <div
                v-if="item.children"
                :style="
                  'transform: rotate(' + (!item.active ? '180' : '0') + 'deg)'
                "
                class="openIcon iconfont icon-shouqi"
              ></div>
            </div>
            <div class="childCont" v-if="item.children">
              <div
                :class="['listItem', childItem.active ? 'listItemActive' : '']"
                @click="listFn(childItem)"
                :key="childIndex"
                v-for="(childItem, childIndex) in item.children"
              >
                <span
                  :class="['nav-icon', 'iconfont', childItem.meta.icon]"
                ></span>
                {{ childItem.meta.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightNav">
      <div class="headCont">
        <div class="system-title">
          <h1>AI后台模版系统</h1>
          <div class="subtitle">AI back-end template system</div>
        </div>

        <div class="headCtrl">
          <div class="userInfo" @click="toggleUserMenu">
            <div class="user-avatar">
              <span class="avatar-text">{{ userStore.firstName }}</span>
            </div>
            <div class="user-details">
              <span class="user-name">{{ userStore.userInfo.user_name }}</span>
              <span class="user-role">{{ userStore.userInfo.role_name }}</span>
            </div>
            <span class="dropdown-icon iconfont icon-xialajiantouxiao"></span>

            <!-- 自定义下拉菜单 -->
            <div class="custom-dropdown-menu" v-if="showUserMenu">
              <div class="dropdown-item" @click="dropFn(2)">
                <span class="dropdown-icon iconfont icon-xiugaimima"></span>
                <span>修改密码</span>
              </div>
              <div class="dropdown-item" @click="dropFn(3)">
                <span
                  class="dropdown-icon iconfont icon-shinshoptuichudenglu"
                ></span>
                <span>退出登录</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mainCont">
        <slot class="slot"></slot>
      </div>
    </div>
    <cool-dialog
      v-model="outMask"
      title="账号退出提示"
      :closeOnClickModal="true"
      @confirm="outFn"
      @cancel="outMask = false"
    >
      <div class="logout-confirm">
        <div class="logout-icon">
          <span class="iconfont icon-shinshoptuichudenglu"></span>
        </div>
        <div class="logout-message">
          <p class="logout-title">确定要退出登录吗？</p>
          <p class="logout-desc">退出后需要重新输入账号密码才能进入系统</p>
        </div>
      </div>
    </cool-dialog>
    <!-- 替换为自定义的CoolDialog和PasswordForm组件 -->
    <cool-dialog
      v-model="editPassword"
      title="修改账号密码"
      :closeOnClickModal="true"
      @confirm="sureEditFn"
      @cancel="editPassword = false"
    >
      <password-form
        ref="passwordForm"
        v-model="passwordFormData"
        @validate="handlePasswordValidate"
      />
    </cool-dialog>
  </div>
</template>
<style scoped lang="less">
/* 使用LESS的mixins来复用渐变样式 */
.gradient-bg(@start: #4b58dc, @end: #7b86ff, @angle: 135deg) {
  background: linear-gradient(@angle, @start, @end);
}

.gradient-text(@start: #4b58dc, @end: #7b86ff, @angle: 90deg) {
  background: linear-gradient(@angle, @start, @end);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.floating-animation(@duration: 6s) {
  animation: floating @duration ease-in-out infinite;
}

@keyframes floating {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes navItemGlow {
  from {
    box-shadow: 0 0 5px rgba(75, 88, 220, 0.5);
  }
  to {
    box-shadow: 0 0 15px rgba(75, 88, 220, 0.8);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shine {
  from {
    background-position: -200px;
  }
  to {
    background-position: calc(100% + 200px);
  }
}

.container {
  background: linear-gradient(135deg, #3a4cb9, #5d6adf, #4b58dc);
  height: 100vh;
  // padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 70%
    );
    transform: rotate(30deg);
    z-index: 0;
  }

  .leftNav {
    width: 240px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
    background: rgba(48, 53, 128, 0.7);
    // border-radius: 15px 15px 0 0;
    // background: #4b58dc;

    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);

    .brand-area {
      padding: 20px;
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .brand-logo {
        height: 50px;
        width: 50px;
        .gradient-bg(#4b58dc, #9c64ff);
        border-radius: 12px;
        font-size: 18px;
        font-weight: bold;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 15px rgba(75, 88, 220, 0.4);
        margin-right: 15px;
        .floating-animation(4s);
        img {
          width: 100%;
          height: 100%;
        }
      }

      .brand-name {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        letter-spacing: 1px;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }
    }

    .navCont {
      overflow-y: scroll;
      flex: 1;
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      color: #e3e6ed;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.3) transparent;

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
      }

      .parentList {
        width: 100%;
        transition: all 0.3s linear;
        overflow: hidden;

        .navItem {
          width: 100%;
          line-height: 50px;
          box-sizing: border-box;
          cursor: pointer;
          transition: all 0.3s;
          height: 50px;
          overflow: hidden;
          box-sizing: border-box;
          margin-bottom: 5px;
          position: relative;
          border-radius: 8px;

          &.item-active {
            animation: navItemGlow 2s infinite alternate;
          }

          &:hover .navTop {
            .gradient-bg(rgba(152, 162, 248, 0.7), rgba(103, 117, 244, 0.7));
            transform: translateY(-2px);
          }

          .navTop {
            display: flex;
            align-items: center;
            border-radius: 8px;
            justify-content: space-between;
            padding: 0 15px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;

            // 添加光效扫过效果
            &:after {
              content: "";
              display: block;
              width: 30px;
              height: 100%;
              position: absolute;
              top: 0;
              left: -100px;
              background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0) 100%
              );
              animation: shine 3s infinite;
              animation-play-state: paused;
            }

            &:hover:after {
              animation-play-state: running;
            }

            .openIcon {
              transition: all 0.3s;
            }

            .navItemVal {
              display: flex;
              align-items: center;

              .nav-icon {
                margin-right: 10px;
                font-size: 16px;
                transition: all 0.3s ease;
                color: rgba(255, 255, 255, 0.8);
              }
            }
          }

          .navActive {
            .gradient-bg(rgba(152, 162, 248, 0.9), rgba(103, 117, 244, 0.9));
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);

            .navItemVal {
              .nav-icon {
                color: white;
              }
            }
          }

          .childCont {
            width: 100%;
            overflow: hidden;
            transition: all 0.3s;
            padding-left: 5px;

            .listItem {
              width: 100%;
              display: flex;
              align-items: center;
              font-size: 14px;
              padding: 0 15px;
              box-sizing: border-box;
              border-radius: 8px;
              transition: all 0.3s ease;

              &:hover {
                background: rgba(255, 255, 255, 0.1);
              }

              .nav-icon {
                margin-right: 10px;
                font-size: 14px;
              }
            }

            .listItemActive {
              .gradient-bg(rgba(152, 162, 248, 0.6), rgba(103, 117, 244, 0.6));
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }
          }
        }

        .navItemActive {
          background: rgba(93, 106, 223, 0.3);
          border-radius: 8px;
          height: v-bind(openHeight);
          box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .rightNav {
    width: 100px;
    margin-top: 15px;
    flex: 1;
    background: linear-gradient(135deg, #f7f8fe 0%, #eef0fd 100%);
    border-radius: 30px 0 0 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: -10px 0 20px rgba(0, 0, 0, 0.1) inset;

    .headCont {
      height: 80px;
      display: flex;
      justify-content: space-between;
      padding: 0 30px;
      box-sizing: border-box;
      align-items: center;
      background-color: white;
      box-shadow: 0 5px 15px rgba(75, 88, 220, 0.05);
      position: relative;
      margin-bottom: 0;
      &:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        background: linear-gradient(to right, #4b58dc, #9c64ff, #4b58dc);
        background-size: 200% auto;
        animation: shine 3s linear infinite;
      }

      .system-title {
        h1 {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
          .gradient-text();
          position: relative;
        }

        .subtitle {
          font-size: 12px;
          color: #909399;
          margin-top: 3px;
        }
      }

      .headCtrl {
        display: flex;
        align-items: center;

        .userInfo {
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 8px 15px;
          border-radius: 30px;
          background: rgba(243, 244, 255, 0.8);
          border: 1px solid rgba(75, 88, 220, 0.1);
          box-shadow: 0 3px 10px rgba(75, 88, 220, 0.05);
          position: relative;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(243, 244, 255, 1);
            box-shadow: 0 5px 15px rgba(75, 88, 220, 0.1);
          }

          .user-avatar {
            height: 36px;
            width: 36px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            .gradient-bg();
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 8px rgba(75, 88, 220, 0.3);

            .avatar-text {
              color: white;
              font-weight: bold;
              font-size: 16px;
            }
          }

          .user-details {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
            margin-right: 10px;

            .user-name {
              font-weight: 500;
              color: #333;
              font-size: 14px;
            }

            .user-role {
              color: #909399;
              font-size: 12px;
            }
          }

          .dropdown-icon {
            color: #909399;
            transition: all 0.3s ease;
            font-size: 12px;
          }

          &:hover .dropdown-icon {
            // transform: rotate(180deg);
          }

          // 自定义下拉菜单
          .custom-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 150px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            padding: 8px;
            z-index: 100;
            transform-origin: top right;
            animation: dropdownFadeIn 0.25s ease;

            .dropdown-item {
              padding: 12px 15px;
              display: flex;
              align-items: center;
              border-radius: 6px;
              transition: all 0.2s ease;
              position: relative;
              overflow: hidden;

              .dropdown-icon {
                margin-right: 10px;
                font-size: 16px;
                .gradient-text();
              }

              &:hover {
                background: rgba(243, 244, 255, 1);

                &:before {
                  left: 100%;
                }
              }

              // 添加光效扫过效果
              &:before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                  90deg,
                  transparent,
                  rgba(255, 255, 255, 0.5),
                  transparent
                );
                transition: 0.5s;
              }

              &:not(:last-child) {
                margin-bottom: 2px;
              }
            }
          }
        }
      }
    }

    .mainCont {
      flex: 1;
      height: 100px;
      overflow: auto;
      border-radius: 20px 0 0 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.02);
        border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(75, 88, 220, 0.2);
        border-radius: 3px;
      }

      .slot {
        display: flex;
        flex-direction: column;
        height: 100px;
        flex: 1;
      }
    }
  }
}

.dropIcon {
  margin-right: 10px;
  font-size: 16px;
}

/* 退出登录弹窗样式 */
.logout-confirm {
  display: flex;
  align-items: center;
  padding: 15px 10px;

  .logout-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(
      135deg,
      rgba(75, 88, 220, 0.1),
      rgba(123, 134, 255, 0.2)
    );
    border-radius: 50%;
    margin-right: 20px;
    animation: pulse 2s infinite ease-in-out;

    .iconfont {
      font-size: 28px;
      background: linear-gradient(45deg, #4b58dc, #7b86ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .logout-message {
    flex: 1;

    .logout-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      margin: 0 0 8px 0;
    }

    .logout-desc {
      font-size: 14px;
      color: #909399;
      margin: 0;
      line-height: 1.4;
    }
  }
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
